﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="Skecthial.UI.Tests.TestPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>FancyBox 1.3.4 | Demonstration</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="../assets/plugins/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" href="../assets/plugins/fancybox/jquery.fancybox-1.3.4.css"
        type="text/css" media="screen" />
    <script type="text/javascript" src="../assets/plugins/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            /*
			*   Examples - images
			*/

            $("a#example1").fancybox();

            $("a#example2").fancybox({
                'overlayShow': false,
                'transitionIn': 'elastic',
                'transitionOut': 'elastic'
            });

            $("a#example3").fancybox({
                'transitionIn': 'none',
                'transitionOut': 'none'
            });

            $("a#example4").fancybox({
                'opacity': true,
                'overlayShow': false,
                'transitionIn': 'elastic',
                'transitionOut': 'none'
            });

            $("a#example5").fancybox();

            $("a#example6").fancybox({
                'titlePosition': 'outside',
                'overlayColor': '#000',
                'overlayOpacity': 0.9
            });

            $("a#example7").fancybox({
                'titlePosition': 'inside'
            });

            $("a#example8").fancybox({
                'titlePosition': 'over'
            });

            $("a[rel=example_group]").fancybox({
                'transitionIn': 'none',
                'transitionOut': 'none',
                'titlePosition': 'over',
                'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

            /*
			*   Examples - various
			*/

            $("#various1").fancybox({
                'titlePosition': 'inside',
                'transitionIn': 'none',
                'transitionOut': 'none'
            });

            $("#various2").fancybox();

            $("#various3").fancybox({
                'width': '75%',
                'height': '75%',
                'autoScale': false,
                'transitionIn': 'none',
                'transitionOut': 'none',
                'type': 'iframe'
            });

            $("#various4").fancybox({
                'padding': 0,
                'autoScale': false,
                'transitionIn': 'none',
                'transitionOut': 'none'
            });
        });
    </script>
</head>
<body>
    <div>
        <a id="various1" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a>
    </div>
    <div style="display: none;">
        <div id="inline1" style="width: 400px; height: 100px; overflow: auto;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor
            facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante
            ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet
            ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium
            varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales
            orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare,
            faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl
            nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae
            orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit
            amet, vestibulum sed nunc.
        </div>
    </div>
</body>
</html>
